<template>
    <div class="subheadings">
        {{ props.index==1?`${provinceName}已提交房屋数量统计`:`${provinceName}灾害风险点统计` }}
    </div>
    <div class="assy">
        <el-table :data="dataList">
            <el-table-column prop="province" label="省（直辖市）" align="center" />
            <el-table-column prop="province" label="数量" align="center">
                <template #default="scope">
                    <span style="color: #46FFFF;" v-if="index==1">{{scope.row.houseNum}}</span>
                    <span style="color: #46FFFF;" v-if="index==2">{{scope.row.damagePointNum}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="rate" label="抽样率" align="center" v-if="index==1">
              <template #default="scope">
                    <span style="color: #46FFFF;">{{scope.row.rate}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { getProHouseNumCount,getDamagePointCount } from '@/api/provincePreEvaluation.js';
const props = defineProps({
  index: Number,
  code:String,
  provinceName:String
})
const dataList = ref([])

watch(() => props.index, val => {
  if(val==1){
    getData();
  }else if(val==2){
    getData1();
  }
},{ deep: true, immediate: true });


// 获取页面数据
function getData() {
  // 各省（直辖市）已提交房屋数量统计
  getProHouseNumCount({code:props.code}).then((res) => {
    dataList.value = res.data; //各省（直辖市）抽样调查点数量统计
  });
} 

// 获取页面数据
function getData1() {
  // 各省（直辖市）抽样调查点数量统计
  getDamagePointCount({code:props.code}).then((res) => {
    dataList.value = res.data; //各省（直辖市）抽样调查点数量统计
  });
} 
</script>
<style scoped lang="scss">
.subheadings{
    width: 450px;
    height: 105px;
    background-size: 100% 100%;
    background-image: url(/src/assets/images/common/bg_little_title.png);
    margin: 0 auto;
    color: #E4F5FF;
    font-size: 22px;
    font-family: Source Han Sans;
    font-weight: 500;
    line-height: 80px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 40px;
    display: flex;
    justify-content: left;
}
.assy{
    // margin-top: -40px;
    .el-table{
        width: 420px;
        max-height: 770px;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 9999;
        position: absolute;
        left: 13px;
        top: 5px;
        background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);

        // :deep(.el-table-row){
        //     background:rgba(71, 90, 219, .15) !important;
        // }
        :deep(tr:hover>td){
            background:rgba(71, 90, 219, .05) !important;
        }

        :deep(.el-table__header){
            border-bottom: 1px solid #475ADB;
            tr{
                background-color: transparent !important;
            }
            th.el-table__cell{
                background-color: transparent !important;
            }
            th.el-table__cell.is-leaf{
                border-bottom: none;
            }
        }
        :deep(.el-table__inner-wrapper::before){
            display: none;
        }

        
    }
    
}
</style>